<template>
  <div class="xiangqing">
    <!-- 调用局部组件 -->
    <tab />
    <div>
      <!-- 轮播图 -->

      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="(image, index) in banner" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>

      <!-- 价格 -->
      <div class="price">
        <!-- 原价 -->
        <span class="money">￥</span
        ><span v-html="all.originprice" class="op"></span>
        <!-- 到手价格 -->
        <span class="cp"
          >到手<span class="qqq"
            >￥{{ (all.originprice * all.discount) / 10 }}</span
          ></span
        >
      </div>
      <!-- 商品名称 -->
      <div class="proname">{{ all.proname }}</div>

      <!-- 点击加入购物车 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="fn()" />
        <van-goods-action-icon icon="star" text="已收藏" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="fun"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import tab from "../../yjj/item/mynavbar.vue";
import axios from "../../../request/service.js";

export default {
  data() {
    return {
      //以下是详情页展示
      banner: [],
      all: "",
      obj: {},
    };
  },
  components: {
    tab,
  },
  mounted() {
    axios({
      url: `http://118.178.238.19:3001/api/pro/detail/${this.$route.query.id}`,
      method: "get",
    }).then((res) => {
      this.all = res.data.data;
      console.log(res.data.data);
      this.banner.push(res.data.data.img1);
      this.banner.push(res.data.data.img2);
      this.banner.push(res.data.data.img3);
      this.banner.push(res.data.data.img4);
      // this.all.push(res.data.data.originprice);
      // console.log(this.all);
    });
  },
  methods: {
    fun() {
      if (sessionStorage.getItem("token")) {
        this.$router.push("/cart");
        console.log(this.token);
      } else {
        this.$router.push("/my");

        console.log(sessionStorage.getItem("token"));
      }
      axios({
        url: `http://118.178.238.19:3001/api/cart/add`,
        method: "POST",
        data: {
          token: sessionStorage.getItem("token"),
          userid: sessionStorage.getItem("userid"),
          proid: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.van-swipe-item img {
  width: 100%;
}

.price {
  width: 100%;
  height: 80px;
  background: red;
  position: relative;
}

.money {
  display: inline;
  width: 11.2px;

  height: 22.4px;
  color: white;
  font-size: 18px;
  font-family: Gilroy-bold;
}

.op {
  display: inline-block;
  /* width: 50px; */
  height: 6.25rem;
  line-height: 6.25rem;
  text-align: center;
  font-size: 1.875rem;
  font-weight: bolder;
  color: white;
}

/* 到手价格 */
.cp {
  display: inline-block;
  width: 112px;
  height: 23px;
  border-radius: 7.68px;
  background: white;
  font-size: 12px;
  font-weight: bolder;
  color: #fa1e32;
  position: absolute;
  top: 40px;
  margin-left: 4px;
  /* left: 102.4px; */
  text-align: center;
  line-height: 22.992px;
}

.qqq {
  font-size: 16px;
}

/* 商品名称 */
.proname {
  position: absolute;
  top: 31.875rem;
  left: 10px;
  width: 80%;
  font-size: 1rem;
  color: #333;
  font-weight: 700;
}
</style>